import React, { Component, lazy, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import "../styles/Index.scss"

const Home = lazy(() => import('../views/Index/Home'))
const Gong = lazy(() => import('../views/Index/Gong'))
const Jiudian = lazy(() => import('../views/Index/Jiudian'))
const My = lazy(() => import('../views/Index/My'))
const Tabbar = lazy(() => import('../components/Tabbar'))

const NotFound = lazy(() => import('../views/NotFound'))




class Index extends Component {
    render() {
        return (
            <div className='index'>
                <Suspense fallback={'加载中...'}>
                    {/*this.props.children用来保存父组件在渲染子组件是通过子组件内容区传入的数据/组件*/}
                    {/* {this.props.children} */}
                    {/* Switch默认匹配当前项，刷新不会重定向 */}
                    <Switch>
                        <Route path="/index/home" component={Home} />
                        <Route path="/index/gong" component={Gong} />
                        <Route path="/index/jiudian" component={Jiudian} />
                        <Route path="/index/my" component={My} />

                        {/* 路由重定向 exact精准匹配 */}
                        <Redirect from='/index' to="/index/home" exact />

                        {/* 404 */}
                        <Route path="*" component={NotFound} />
                    </Switch>
                    <Tabbar />
                </Suspense>


            </div>
        );
    }
}

export default Index;